<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 将ul里的第一个li设置为红色
            如果 在li上面有其他标签，则改指令无效
            因为 ul 第一个元素 不再是li 因此不成立
         */
        /* ul > li:first-child{    
            color: red;
        } */

        /* 将ul里的第一个span设置为红色
            因为 ul 第一个子元素是  span 因此成立
         */
        ul > span:first-child{    
            color: red;
        }

        /* 在子元素中找到第一个类型为li的元素  */
        ul > li:first-of-type{
            color:  red;
        }

        /* ul > li:not(:nth-child(3)){
            color: yellowgreen;
        } */

        /* ul > p:nth-last-child(5){
            color: red;
        } */

        /* ul > li:nth-child(2n){
            color: red;
        } */
        /* 伪类 不存在的类
            用来描述元素的特殊状态，
            比如：第一个元素，被点击的元素，鼠标移入的元素 
            特点 一般使用冒号开头:
            :first-child 第一个子元素
            :last-child 最后一个元素
            :nth-child() 选中第n个元素
               特殊值
                n  第n位 n的范围是0~正无穷
                2n 或 ever 表示偶数位的元素
                2n+1 或 odd 表示选中奇数位的元素
                以上这些伪类都是基于所有的子元素进行排序

                 :first-child 第一个子元素
                 :last-child 最后一个元素
                 :nth-child() 选中第n个元素 
                    这几个伪类的功能和上述类似，不同点时他们是在同类型元素进行的排序
            :not()否定伪类

        */
    </style>
</head>
<body>
    <!-- 伪类选择器 -->
    <!-- 伪元素选择器 -->

    <ul>
        <span>我是一个span</span>
        <li>第〇个</li>
        <li class="first">第一个</li>
        <p>我是p标签</p>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>